<template>
  <div class="box">
    <router-view v-slot="{ Component, route }">
      <transition name="slide-fade" mode="out-in">
        <keep-alive>
          <Component :is="Component" :key="route.path" v-if="route.meta.keepAlive"></Component>
        </keep-alive>
      </transition>
      <transition name="slide-fade">
        <Component :is="Component" v-if="!route.meta.keepAlive" :key="route.path"></Component>
      </transition>
    </router-view>
  </div>
</template>

<style lang="less" scoped>
/*  进来 */
.slide-fade-enter-active {
  transition: all 0.5s ease-out;
}
/*  离开 */
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1.5, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

